<template>
  <!-- 案件类型调整页面 -->
  <section class="page case-type-adjustment">
    <data-form :model="model" :page="pageService" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="调整去向" prop="typeName">
          <el-input v-model.trim="model.typeName"></el-input>
        </el-form-item>
        <el-form-item label="修改人代号" prop="agentName">
          <el-input v-model.trim="model.agentName"></el-input>
        </el-form-item>
        <el-form-item label="复核人代号" prop="reviewerName">
          <el-input v-model.trim="model.reviewerName"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="applyStatus">
          <el-select clearable placeholder="请选择" v-model="model.applyStatus">
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData('ApplyStatus')"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <data-box
      :data="dataSet"
      :page="pageService"
      :sort="sortService"
      @onPageChange="refreshData"
    >
      <template slot="buttons">
        <el-button @click="onClickAdjustment">单笔调整</el-button>
      </template>
      <template slot="columns">
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            <el-button @click="onClickDetail(scope.row)" type="text"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="caseNumber"
          show-overflow-tooltip
          label="账户号"
          :min-width="$helper.getColumnWidth(8)"
        >
        </el-table-column>
        <el-table-column
          prop="personalId"
          label="客户ID"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="调整去向"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="note"
          label="调整理由"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          prop="agentCode"
          label="修改人代号"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="maintainDate"
          label="修改时间"
          show-overflow-tooltip
          :formatter="row => $filter.dateTimeFormat(row.maintainDate)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="reviewerCode"
          label="复核人代号"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="reviewerDate"
          label="复核时间"
          show-overflow-tooltip
          :formatter="row => $filter.dateTimeFormat(row.reviewerDate)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="applyStatus"
          label="审核状态"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(4)"
          :formatter="
            row => $filter.dictConvert(row.applyStatus, 'ApplyStatus')
          "
        >
        </el-table-column>
        <el-table-column
          prop="note"
          label="注记"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
      </template>
    </data-box>

    <!-- 单比调整 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialog"
      title="单笔调整"
      :close-on-press-escape="false"
      append-to-body
    >
      <case-single-ratio-adjustment
        @close="dialog = false"
        ref="case-single-ratio-adjustment"
        @refreshData="refreshData"
        :isDetail="isDetail"
        :row="row"
      />
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import CaseSingleRatioAdjustment from "~/components/customer-group-management/case-single-ratio-adjustment.vue";
import { CustomerGroupManageService } from "~/services/domain-service/customer-group-manage.service";

@Auth(2335)
@Layout("workspace")
@Component({
  components: {
    CaseSingleRatioAdjustment
  }
})
export default class CaseTypeAdjustment extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CustomerGroupManageService)
  private customerGroupManageService: CustomerGroupManageService;

  private dataSet: any[] = [];

  private model: any = {
    typeName: "",
    agentName: "",
    reviewerName: "",
    applyStatus: ""
  };

  private dialog: boolean = false;
  private isDetail: boolean = false;
  private row: any = {};

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    this.customerGroupManageService
      .findAllApply(this.paramsHandler(), this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private paramsHandler() {
    const params = { ...this.model };
    return params;
  }

  private onClickDetail(row) {
    this.dialog = true;
    this.isDetail = true;
    this.row = row;
    this.$nextTick(() => {
      const form: any = this.$refs["case-single-ratio-adjustment"];
      form.isShow = true;
      form.dataHandler(this.row.caseNumber);
      form.model.typeId = this.row.typeId;
      form.model.note = this.row.note;
    });
  }

  private onClickAdjustment() {
    this.dialog = true;
    this.isDetail = false;
    this.$nextTick(() => {
      const form: any = this.$refs["case-single-ratio-adjustment"];
      form.searchModel.caseNumber = "";
      form.model = {};
      form.isShow = false;
    });
  }
}
</script>

<style lang="less" scoped></style>
